<template>
	<view class="contract-container">
		<view class="contract-list">
			<view class="contract-item" v-for="(item, index) in contractList" :key="index">
				<view class="item-header">
					<text class="title">{{item.title}}</text>
					<text class="status" :class="item.status">{{item.statusText}}</text>
				</view>
				<view class="item-content">
					<view class="info-row">
						<text class="label">合同编号</text>
						<text class="value">{{item.contractNo}}</text>
					</view>
					<view class="info-row">
						<text class="label">签订时间</text>
						<text class="value">{{item.signTime}}</text>
					</view>
					<view class="info-row">
						<text class="label">生效时间</text>
						<text class="value">{{item.effectiveTime}}</text>
					</view>
					<view class="info-row">
						<text class="label">到期时间</text>
						<text class="value">{{item.expiryTime}}</text>
					</view>
				</view>
				<view class="item-footer">
					<u-button 
						type="primary" 
						size="small"
						@click="viewContract(item)">查看合同</u-button>
					<u-button 
						v-if="item.status === 'pending'"
						type="warning" 
						size="small"
						@click="signContract(item)">立即签署</u-button>
				</view>
			</view>
		</view>

		<u-empty v-if="contractList.length === 0" text="暂无合同" mode="list"></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			contractList: [
				{
					title: '供水服务合同',
					status: 'active',
					statusText: '生效中',
					contractNo: 'C202502190001',
					signTime: '2025-02-19',
					effectiveTime: '2025-02-19',
					expiryTime: '2026-02-18'
				},
				{
					title: '设备租赁合同',
					status: 'pending',
					statusText: '待签署',
					contractNo: 'C202502190002',
					signTime: '-',
					effectiveTime: '-',
					expiryTime: '-'
				}
			]
		}
	},
	methods: {
		viewContract(item) {
			// TODO: 查看合同详情
			console.log('查看合同：', item.contractNo)
		},
		signContract(item) {
			uni.showModal({
				title: '提示',
				content: '确定要签署该合同吗？',
				success: (res) => {
					if (res.confirm) {
						// TODO: 调用签署合同接口
						uni.showToast({
							title: '签署成功',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.contract-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;

	.contract-list {
		.contract-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.item-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.status {
					font-size: 28rpx;

					&.active {
						color: #19be6b;
					}

					&.pending {
						color: #ff9900;
					}

					&.expired {
						color: #909399;
					}
				}
			}

			.item-content {
				.info-row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						color: #666;
						font-size: 28rpx;
						width: 160rpx;
					}

					.value {
						color: #333;
						font-size: 28rpx;
						flex: 1;
						text-align: right;
					}
				}
			}

			.item-footer {
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-end;
				gap: 20rpx;
			}
		}
	}
}
</style>
